<script setup lang="ts">
import { usePrefix } from '@season-designable/vue';
import { ElColorPicker, ElInput } from 'element-plus';

const emit = defineEmits(['change']);
const props = defineProps(['value']);

const prefix = usePrefix('color-input');
</script>

<template>
  <div :class="prefix">
    <ElInput
      :modelValue="props.value"
      placeholder="Color"
      @update:modelValue="
        (e) => {
          emit('change', e);
        }
      "
    >
      <template #prefix>
        <ElColorPicker
          :modelValue="props.value"
          size="small"
          @update:modelValue="
            (e) => {
              emit('change', e);
            }
          "
        />
      </template>
    </ElInput>
  </div>
</template>

<style lang="scss" scoped>
@import '../../../../styles.scss';
.dn-color-input {
  // margin-left: 4px;
  width: 100%;

  :deep(.#{$element-prefix}-input__wrapper) {
    padding: 1px 6px;

    .#{$element-prefix}-color-picker__color-inner {
      display: block;

      .#{$element-prefix}-icon {
        display: block;
      }
    }
  }

  // :deep {
  // .#{$element-prefix}-popover-inner-content {
  //   padding: 0 !important;
  //   user-select: none;
  // }

  // .#{$element-prefix}-input__wrapper {
  //   padding-left: 0;
  // }

  // .el-input--prefix {
  //   .#{$element-prefix}-input__inner {
  //     padding-left: 0;
  //   }
  // }

  // &-color-tips {
  //   width: 20px;
  //   height: 20px;
  //   border-radius: 2px;
  //   border: 1px solid $border-color-base;
  //   cursor: pointer;
  // }
  // }
}
</style>
